<div class="room-create">
    <form class="layui-form" action="" autocomplete="off">

        <div class="layui-form-item">
            <label class="layui-form-label">会议室名称</label>
            <div class="layui-input-block">
                <input name="name" type="text" class="layui-input" placeholder="会议室的名称" lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">会议室地点</label>
            <div class="layui-input-block">
                <input name="location" type="text" class="layui-input" placeholder="会议室的地点" lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">会议室描述</label>
            <div class="layui-input-block">
                <textarea name="description" class="layui-textarea" placeholder="会议室的具体描述"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">座位数</label>
            <div class="layui-input-block">
                <input name="seats" type="text" class="layui-input" placeholder="会议室的座位数">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">会议室类型</label>
            <div class="layui-input-block">
                <select name="type" lay-verify="required">
                    <option value=""></option>
                    <option value="T型">T型</option>
                    <option value="U型">U型</option>
                    <option value="围桌">围桌</option>
                    <option value="阶梯">阶梯</option>
                    <option value="接见式">接见式</option>
                    <option value="宴会厅">宴会厅</option>
                    <option value="董事会式">董事会式</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">会议室照片</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-primary pic">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <div class="mr-pv"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">特殊授权角色</label>
            <div class="layui-input-block">
                <select name="auth_group" xm-select="auth_group" xm-select-show-count="5" xm-select-search>
                    <option value="">被选中角色有权查看该会议室的所有会议</option>
                    <volist name="posts" id="post">
                        <option value="{$post.id}">{$post.name}</option>
                    </volist>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit lay-filter="create">创建</button>
                <button class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script>
    $(function () {

        layui.config({
            base: '/Public/'
        }).extend({
            formSelects: 'layui-formSelects/src/formSelects-v4'
        });

        layui.use(['form','upload', 'layer','formSelects'],function () {
            var form = layui.form,
                layer = layui.layer,
                upload = layui.upload,
                formSelects = layui.formSelects;

            upload.render({
                elem: '.pic',
                url: '/meetings/uploadMeetingRoomPic',
                ext: 'jpg|jpeg|png',
                done: function(response) {
                    if (response.code) {
                        layer.alert(response.msg);
                    } else {
                        var item = this.item;  //获取当前触发上传的元素
                        $(item).parents('.layui-input-block').find('.mr-pv').html(
                            '<img src="'+ response.data.path +'" class="mt-10" alt=="会议室的图片">' +
                            '<input type="hidden" name="pic" value="'+ response.data.path +'">'
                        );
                    }
                }
            });

            //保存
            form.on('submit(create)',function (data) {
                if (typeof data.field.pic == 'undefined') {
                    layer.msg('请上传会议室照片', {icon: 0, time: 1500});
                    return false;
                }
                delete data.field.file;
                layer.load(2, {shade : [0.5, '#fff']});
                $.post('/meetings/meetingRoomStore', data.field, function(response) {
                    if (response.code === 0) {
                        location.href = '/meetings/rooms';
                    } else {
                        layer.closeAll();
                        layer.alert(response.msg, {icon: 2});
                    }
                }, 'json');
            });

        })
    });
</script>